<!-- 投诉 -->
<template>
    <Dialog
        v-model="visible"
        title="投诉主题"
        width="360px"
        :show-cancel-button="true"
        :show-confirm-button="true"
        cancel-button-text="取消"
        confirm-button-text="确定"
        @confirm="handleConfirm"
        @cancel="handleCancel"
    >
        <div class="flex flex-col gap-[1rem]">
            <el-radio-group v-model="selectedReason" class="flex flex-col gap-[0.5rem] w-full">
                <el-radio 
                    v-for="item in complaintReasons" 
                    :key="item.value" 
                    :label="item.value"
                    class="!mr-0 !w-full complaint-radio"
                    size="large"
                >
                    {{ item.label }}
                </el-radio>
            </el-radio-group>
            
            <!-- 自定义原因输入框 -->
            <el-input
                v-if="selectedReason === 'custom'"
                v-model="customReason"
                type="textarea"
                :rows="3"
                placeholder="请输入投诉原因"
                maxlength="200"
                show-word-limit
            />
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Dialog from '@/components/Dialog/index.vue'
import { message } from '@/utils/message'

// 定义组件属性
interface Props {
    postId: number, // 帖子ID
    modelValue: boolean // v-model绑定值
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits(['close', 'update:modelValue'])

// 控制弹窗显示
const visible = ref(props.modelValue)

// 监听外部modelValue变化
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
})

// 监听内部visible变化
watch(() => visible.value, (newVal) => {
    emit('update:modelValue', newVal)
})

// 投诉原因选项
const complaintReasons = [
    { label: '垃圾广告', value: 'spam' },
    { label: '色情内容', value: 'porn' },
    { label: '欺诈行为', value: 'fraud' },
    { label: '不实信息', value: 'fake' },
    { label: '违法犯罪', value: 'illegal' },
    { label: '抄袭盗版', value: 'copy' },
    { label: '涉及财经', value: 'finance' },
    { label: '自定义原因', value: 'custom' }
]

// 选中的投诉原因
const selectedReason = ref('')
// 自定义原因
const customReason = ref('')

// 确认投诉
const handleConfirm = async () => {
    if (!selectedReason.value) {
        message.warning('请选择投诉原因')
        return
    }

    if (selectedReason.value === 'custom' && !customReason.value.trim()) {
        message.warning('请输入自定义投诉原因')
        return
    }

    try {
        // TODO: 调用投诉接口
        // await complaintApi({
        //     postId: props.postId,
        //     reason: selectedReason.value,
        //     customReason: selectedReason.value === 'custom' ? customReason.value : ''
        // })
        
        message.success('投诉成功')
        handleClose()
    } catch (error) {
        console.error('投诉失败:', error)
        message.error('投诉失败，请稍后重试')
    }
}

// 取消投诉
const handleCancel = () => {
    handleClose()
}

// 关闭弹窗
const handleClose = () => {
    visible.value = false
    selectedReason.value = ''
    customReason.value = ''
    emit('close')
}
</script>

<style scoped>
:deep(.el-radio) {
    height: auto;
    margin-right: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}

:deep(.el-radio:hover) {
    background-color: #F3F4F6;
}

:deep(.el-radio__label) {
    color: #333;
    padding-left: 0.75rem;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #3B82F6;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #3B82F6;
    background: #3B82F6;
}

.complaint-radio {
    transition: all 0.3s;
}

:deep(.el-dialog__body) {
    padding: 1rem !important;
}
</style> 